<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试系统 - 管理员</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#FF7D00',
                        neutral: '#86909C',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#165DFF'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
            }
            .btn-hover {
                @apply transition-all duration-300 transform hover:scale-[1.02] hover:shadow-lg;
            }
            .nav-link {
                @apply flex items-center gap-2 px-4 py-3 text-gray-600 hover:bg-primary/5 hover:text-primary rounded-lg transition-all duration-300;
            }
            .nav-link.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .form-input {
                @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all duration-300;
            }
            .card {
                @apply bg-white rounded-xl p-6 card-shadow transition-all duration-300 hover:shadow-xl;
            }
            .badge {
                @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-gray-800 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4">
        <div class="flex items-center justify-between h-16">
            <div class="flex items-center">
                <a href="#" class="flex items-center">
                    <i class="fa fa-graduation-cap text-primary text-2xl mr-2"></i>
                    <span class="text-xl font-bold text-primary">在线考试系统</span>
                </a>
                <div class="hidden md:block ml-10">
                    <nav class="flex space-x-4">
                        <a href="#" class="nav-link active">
                            <i class="fa fa-home"></i>
                            <span>首页</span>
                        </a>
                        <a href="#" class="nav-link">
                            <i class="fa fa-calendar-check"></i>
                            <span>考试管理</span>
                        </a>
                        <a href="#" class="nav-link">
                            <i class="fa fa-users"></i>
                            <span>用户管理</span>
                        </a>
                        <a href="#" class="nav-link">
                            <i class="fa fa-chart-bar"></i>
                            <span>统计分析</span>
                        </a>
                    </nav>
                </div>
            </div>
            <div class="flex items-center">
                <button class="p-2 rounded-full hover:bg-gray-100 text-gray-600 relative">
                    <i class="fa fa-bell"></i>
                    <span class="absolute top-1 right-1 h-2 w-2 rounded-full bg-red-500"></span>
                </button>
                <div class="ml-4 relative">
                    <div class="flex items-center">
                        <img class="h-8 w-8 rounded-full object-cover" src="https://picsum.photos/200/200" alt="用户头像">
                        <span class="ml-2 font-medium text-gray-700 hidden md:block">王管理员</span>
                        <i class="fa fa-angle-down ml-1 text-gray-500 hidden md:block"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 主内容区域 -->
<main class="flex-grow container mx-auto px-4 py-6">
    <div class="mb-6">
        <h2 class="text-2xl font-bold text-gray-800">考试申请审批</h2>
        <p class="text-gray-600 mt-1">以下是待审批的考试申请</p>
    </div>

    <div class="card">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
            <div class="flex-1">
                <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-search"></i>
                        </span>
                    <input type="text" class="form-input pl-10" placeholder="搜索课程、班级或教师">
                </div>
            </div>
            <div class="flex gap-3">
                <select class="form-input">
                    <option value="">全部状态</option>
                    <option value="pending">待审批</option>
                    <option value="approved">已批准</option>
                    <option value="rejected">已拒绝</option>
                </select>
                <button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all duration-300 btn-hover">
                    筛选
                </button>
            </div>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">申请ID</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">课程名称</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">教师</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">班级</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">考试时间</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">EA-20250516001</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">Java程序设计</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">李四</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">计科2001</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">2025-05-20 09:00</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="badge bg-yellow-100 text-yellow-800">待审批</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80 mr-2" onclick="showApproveModal('EA-20250516001')">审批</button>
                        <button class="text-gray-500 hover:text-gray-700">查看</button>
                    </td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">EA-20250516002</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">数据结构</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">王五</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">计科2002</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">2025-05-22 14:30</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="badge bg-yellow-100 text-yellow-800">待审批</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80 mr-2" onclick="showApproveModal('EA-20250516002')">审批</button>
                        <button class="text-gray-500 hover:text-gray-700">查看</button>
                    </td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">EA-20250516003</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">计算机网络</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">赵六</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">计科2003</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">2025-05-25 10:00</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="badge bg-green-100 text-green-800">已批准</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-gray-500 hover:text-gray-700">查看</button>
                    </td>
                </tr>
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">EA-20250516004</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm font-medium text-gray-900">操作系统</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">钱七</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">计科2004</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <div class="text-sm text-gray-900">2025-05-28 14:00</div>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="badge bg-red-100 text-red-800">已拒绝</span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-gray-500 hover:text-gray-700">查看</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <div class="mt-4 flex items-center justify-between">
